<template>
   <view class="uv-page" ref="page">
      <uv-cell-group>
         <uv-cell
            @click="showPicker(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-picker
            ref="picker1"
            :columns="columns1"
            @change="change"
            @cancel="cancel"
            @confirm="confirm"
         ></uv-picker>
         <uv-picker
            ref="picker2"
            :columns="columns2"
            :defaultIndex="[1]"
            @cancel="cancel"
            @confirm="confirm"
            @change="change"
         ></uv-picker>
         <uv-picker
            ref="picker3"
            :columns="columns3"
            @cancel="cancel"
            @confirm="confirm"
            @change="changeHandler1"
         ></uv-picker>
         <regionsPicker ref="picker4"></regionsPicker>
         <uv-picker
            ref="picker5"
            :columns="columns4"
            @cancel="cancel"
            @confirm="confirm"
            :loading="loading"
            @change="changeHandler2"
         ></uv-picker>
         <uv-picker
            ref="picker6"
            :columns="columns5"
            title="标题太长就会显示省略号"
            @cancel="cancel"
            @confirm="confirm"
            @change="change"
         ></uv-picker>
         <uv-picker
            ref="picker7"
            :columns="columns6"
            :closeOnClickOverlay="false"
            @cancel="cancel"
            @confirm="confirm"
            @close="close"
            @change="change"
         ></uv-picker>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import regionsPicker from './components/regions/regions.vue';

const loading = ref(false);
const page = ref();
const picker1 = ref();
const picker2 = ref();
const picker3 = ref();
const picker4 = ref();
const picker5 = ref();
const picker6 = ref();
const picker7 = ref();

const columnData = ref([
   ['深圳', '厦门', '上海', '拉萨'],
   ['得州', '华盛顿', '纽约', '阿拉斯加'],
]);
const columns1 = ref([['中国', '美国', '日本']]);
const columns2 = ref([['中国', '美国', '日本']]);
const columns3 = ref([
   ['中国', '美国'],
   ['深圳', '厦门', '上海', '拉萨'],
]);
const columns4 = ref([
   ['中国', '美国'],
   ['深圳', '厦门', '上海', '拉萨'],
]);
const columns5 = ref([['中国', '美国', '日本']]);
const columns6 = ref([['中国', '美国', '日本']]);

const list = ref([
   {
      title: '基础使用',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png',
   },
   {
      title: '设置默认项',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png',
   },
   {
      title: '多列联动',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png',
   },
   {
      title: '省市区三级联动',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png',
   },
   {
      title: '加载中状态(切换第一列)',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png',
   },
   {
      title: '设置标题',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png',
   },
   {
      title: '禁止点击遮罩关闭',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png',
   },
]);

const changeHandler1 = (e: any) => {
   change(e);
   const { columnIndex, value, values, index } = e;
   if (columnIndex === 0) {
      picker3.value.setColumnValues(1, columnData.value[index]);
   }
};
const changeHandler2 = (e: any) => {
   change(e);
   const { columnIndex, value, values, index } = e;
   if (columnIndex === 0) {
      loading.value = true;
      uni.$uv.sleep(1000).then(() => {
         picker5.value.setColumnValues(1, columnData.value[index]);
         loading.value = false;
      });
   }
};
const change = (e: any) => {
   console.log('change', e);
};
const close = () => {
   console.log('close');
};
const cancel = () => {
   console.log('cancel');
};
const confirm = (e: any) => {
   console.log('confirm', e);
};
const showPicker = (index: number) => {
   switch (index) {
      case 0:
         picker1.value.open();
         break;
      case 1:
         picker2.value.open();
         break;
      case 2:
         picker3.value.open();
         break;
      case 3:
         picker4.value.open();
         break;
      case 4:
         picker5.value.open();
         break;
      case 5:
         picker6.value.open();
         break;
      case 6:
         picker7.value.open();
         break;
   }
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
